<template>
    <div class="whole-box">
        <div class="content-box">
            <div class="siderbar-box" v-if="writer_account==Username">
                <!-- 侧边栏 -->
                <SiderBar :username="Username"  />
            </div>
            <div class="space-box">
                <!-- 不同界面 -->
                <router-view />
            </div>
        </div>
    </div>

</template>

<script setup>
import Nav from '@/components/Nav/nav.vue'
import SiderBar from './components/SiderBar.vue'
import { useRoute, useRouter } from 'vue-router'
import { watch, ref,computed, onMounted} from 'vue'
const route = useRoute();
const writer_account=computed(() => route.params.username);
const Username = ref(localStorage.getItem('account'));
onMounted(()=>{
   
})
</script>

<style scoped>
.whole-box {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: rgb(244, 245, 247);
}

.content-box {
    margin-top: 2%;
    width: 100%;
    display: flex;
    flex: 1;
    justify-content: center;
    margin-bottom: 1%;
}

/* 侧边栏样式 */
.siderbar-box {
    width: 220px;
    height: 90%;
    border-radius: 10px;
    padding-top: 2%;
    margin-top: 1%;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 2px 1px 19px rgba(0, 0, 0, 0.1);
}

.space-box {
    width: 70%;
    height: 100%;
    margin-left: 2%;
    border-radius: 10px;
}
</style>